<template>
	<div>
		<!--首页tab滚动切换模块 可左右滑动切换-->
		<!--<div class=" cjy-scroll " style="overflow-x: scroll;height: 2.5rem ">-->
		<div style="height: 100%;position: relative;" ref="navhead">
			<ul class="cjy-list" style="min-width: 100%">
				<!--:style="{color: activeList == index ?styleConfig.colorStyle:'' , width:width}"-->
				<li class="cjy-tab-item" v-for="(item, index) in titleInfor" :key="index" @click=" changeIndex(index,item)" ref="titleLi">
					<slot name="textBox" :activeStyle="activeStyle" :normalStyle="normalStyle" :isActive="activeList == index"
								:title="item.goodsClassName">

					</slot>
				</li>
				<!--每个分类选项按钮end-->
			</ul>

		</div>

	</div>
</template>

<script>
  import BScroll from 'better-scroll'
  import PopUp from '@/components/PopUps'
  import TapSelectBox from '@/components/TapSelectBox'

export default {
	data() {
		return {
			classifyClum: false, //控制下拉菜单的
			backGroundColor: "rgba(255, 255, 255, 0.8)",
			colorStyle: "",
			normalStyle: null,
			activeStyle: null,
			activeList: 0,
			tabinsex: null,
			outerWidth: null
		};
	},
	props: {
		pullDownTitle: {
			type: String,
			default: "分类"
		},
		//下拉菜单
		pullDownMemu: {
			type: Boolean,
			default: true
		},
		titleInfor: {
			type: Array,
			//传入的数据如下 分类名称必传
			default: () => [
				{
					goodsClassId: "",
					goodsClassName: "分类"
				}
			]
		},
		styleConfig: {
			type: Object,
			default: () => {
				return {
					clicktabtextcolor: "red",
					activeFontSize: "",
					clicktabbgcolor: "transparent",
					activeBorderColor: "",
					tabtextcolor: "black",
					normalFontSize: "",
					normalBackgroundColor: "transparent",
					normalBorderColor: "transparent"
				};
			}
		},
		activeIndex: {
			type: Number,
			default: 0
		},
		tabindex: {
			type: String,
			default: "0"
		}
	},
	components: {
		TapSelectBox,
		PopUp
	},
	watch: {
		activeIndex(newData) {
			this.changeActiceIndex(newData);
		},
		activeList(newData) {
			setTimeout(() => {
				this.tapMove(newData);
			}, 50);
		},
		titleInfor() {
			this.scroll.refresh();
		},
		styleConfig(data) {
			console.log("styleConfig", data);
			this.initStyleConfig();
		},
		tabindex(data) {
			this.tabinsex = data;
			this.changeIndex(this.tabinsex);
		}
	},
	methods: {
		changeActiceIndex(index) {
			var maxLength = this.titleInfor ? this.titleInfor.length : 0;
			var activeIndex = Math.min(maxLength, index);
			this.activeList = Math.max(0, index);
		},
		changeIndex(index, item) {
			this.changeActiceIndex(index);
			this.$emit("tabOnChange", index, item);
		},

		initStyleConfig() {
			var styleConfig = this.styleConfig;
			console.log(styleConfig,'styleConfig')
			this.normalStyle = {
				fontSize: styleConfig.normalFontSize || "",
				color: styleConfig.tabtextcolor || "",
				borderColor: styleConfig.normalBorderColor || "",
				backgroundColor: styleConfig.normalBackgroundColor || ""
			};

			this.activeStyle = {
				fontSize: styleConfig.activeNormalFontSize || "",
				color: styleConfig.clicktabtextcolor || "299a28",
				borderColor: styleConfig.activeBorderColor || "",
				backgroundColor: styleConfig.clicktabbgcolor || ""
			};
		},
		tapMove(newData) {
			var testDiv = this.$refs.titleLi;
			var index = newData;
			var activeTitle = testDiv ? testDiv[index] : "";
			var scrollLeft;
			this.outerWidth = this.$refs.navhead
				? this.$refs.navhead.offsetWidth
				: 375;
			if (!activeTitle) {
				return;
			}
			scrollLeft = Math.max(
				0,
				activeTitle.offsetLeft -
					this.outerWidth / 2 +
					activeTitle.offsetWidth / 2
			);
			scrollLeft = Math.min(
				scrollLeft,
				this.scroll.scrollerWidth - this.outerWidth
			);
			this.scroll.scrollTo(-scrollLeft, 0, 500, "easing");
		}
	},

    created() {
    },
    mounted() {
      this.initStyleConfig()
      this.$nextTick(() => {
        var scroll = new BScroll(this.$refs.navhead, {
          startX: 0,
          startY: 0,
          scrollX: true,
          scrollY: false,
          click: true,
          bounce: false,
          momentumLimitDistance: 5
        })
        this.scroll = scroll
      })
    },
    updated() {
      this.$nextTick(() => {
        this.scroll.refresh()
        var maxIndex = this.titleInfor.length - 1 || 0
        if (maxIndex < this.activeList) {
          this.activeList = maxIndex
          this.changeIndex(this.activeList, this.titleInfor[this.activeList])
        }
      })
    },

  }
</script>

<style scoped>
  .classify_select {
    right: 0;
    top: 0;
  }

  .cjy-tab-item {
    position: relative;
    z-index: 2;
    padding: 0.2rem 0.2rem;
    text-align: center;
    overflow: hidden;
    text-overflow: clip;
    word-break: break-all;
    white-space: inherit;
    /*border-bottom: 2px solid transparent;*/
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto 0.5rem;
  }

  .cjy-tab-item-height {
    height: 100%;
    width: 4.5rem;
    line-height: 2.2rem;
    font-size: 0.7rem;
  }

  .active-list {
    /*border-bottom: 2px solid #0f8de0;*/
    color: #0f8de0;;
  }

  .cjy-list {
    display: flex;
    position: absolute;
    height: 100%;
  }

  .cjy-outer {
    width: 100%;
    height: 2.2rem;
    position: relative;
    /*border-bottom:  solid rgb(234, 234, 234);*/
  }

  .cjy-scroll {
    position: relative;
    height: 100%;
    top: 3rem;
  }

  .aui-col-xs-3 {
    font-size: 0.7rem;
    min-width: 20%;
  }

  .nav-window-enter-active,
  .nav-window-leave-active {
    transition: all 0.2s;
  }

  .nav-window-enter,
  .nav-window-leave-to {
    transform: translatey(-100%);
    opacity: 0;
  }

  .cjy-slder {
    height: 100%;
    width: 0;
  }

  .cjy-active-slider {
    height: 100%;
    background: #0f8de0;
    position: absolute;
    bottom: 0;
    height: 2px;
    left: 0;
    z-index: 3;
    transition: 0.5s;
  }

  .active-item {
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
  }

  .cjy-background-white {
    background: rgba(255, 255, 255, 0.8);
  }

  .cjy-tab-item-text {
    display: inline-block;
    line-height: 1rem;
    padding: 0 0.3rem;
  }
</style>
